<template>
    <div>
        <iframe class="iframe_viewer" ref="iframe_viewer" v-if="src" :src="src" frameborder="0"></iframe>
    </div>
</template>
<style lang="scss" scoped>
.iframe_viewer {
    width: 100%;
    overflow: hidden;
    height: 100%;
}
</style>
<script>
import { mapState } from 'vuex';
export default {
    name: "pdf_viewer",
    props: {
        src: String,
        //是否显示图片
        showPicture: {
            type: Boolean,
            default: true,
        },
        isSign: {
            type: Boolean,
            default: false,
        }
    },
    data() {
        return {
            tempMarkList: undefined,
            temImgLisg: undefined,
            temSignList:undefined,
        };
    },
    watch: {
        isSign:{
            deep: true,
        },
        src: {
            deep: true,
            handler(newVal, oldVal) {
                if (oldVal) return;
                window.vm = this;
                //当前vue页面加载完成后获取页面控件执行事件
                this.$nextTick(() => {
                    if (this.src&&this.isSign) {
                        var that = this;
                        //iframe加载完成后注册iframe事件
                        if (this.$refs.iframe_viewer.attachEvent) {
                            this.$refs.iframe_viewer.attachEvent(
                                "onload",
                                function () {
                                    that.pdfLoaded();
                                }
                            );
                        } else {
                            this.$refs.iframe_viewer.onload = function () {
                                that.pdfLoaded();
                            };
                        }
                    }
                });
            },
        },
    },
    methods: {
        /**
         * pdf加载注册右键菜单
         */
        pdfLoaded() {
            var that = this;
            this.$refs.iframe_viewer.contentWindow.setShowPicture(
                this.showPicture
            );
            this.$refs.iframe_viewer.contentWindow.document.body.oncontextmenu =
                function (e) {
                    that.$emit("oncontextmenu", e);
                };
            this.$refs.iframe_viewer.contentWindow.document.body.onmouseover =
                function (e) {
                    var marks = [];
                    if (e.target.getAttribute("class") == "mark_span_label") {
                        marks = that.__getMouseMarks(e, marks, that);
                    }
                    that.markMouseOver(e, marks);
                };
            this.$refs.iframe_viewer.contentWindow.document.body.onmousedown =
                function (e) {
                    if (
                        that.$refs.iframe_viewer &&
                        that.$refs.iframe_viewer.contentWindow &&
                        e.button != 2
                    )
                        that.$refs.iframe_viewer.contentWindow.reset(e);
                    if (
                        !e.target.hasAttribute("class") ||
                        e.target.getAttribute("class").indexOf("drag_label") ==
                            -1
                    ) {
                        if (
                            that.$refs.iframe_viewer &&
                            that.$refs.iframe_viewer.contentWindow
                        )
                            that.$refs.iframe_viewer.contentWindow.resetSelectionStyle(
                                e
                            );
                    }
                    var marks = [];
                    if (e.target.getAttribute("class") == "mark_span_label") {
                        marks = that.__getMouseMarks(e, marks, that);
                    } else if (e.target.getAttribute("class") == "textLayer") {
                        var img =
                            that.$refs.iframe_viewer.contentWindow.getImageByPosition(
                                e,
                                e.target.previousElementSibling
                            );
                        if (img) {
                            marks = that.__getMouseImage(
                                { target: img },
                                marks
                            );
                            that.__selectionImageByMouse({ target: img });
                        }
                    }
                    that.markMouseDown(e, marks);
                };

            this.$refs.iframe_viewer.contentWindow.document.body.onkeydown =
                function (e) {
                    that.markKeyDown(e);
                };
            this.$refs.iframe_viewer.contentWindow.document.body.onmouseup =
                function (e) {
                    var marks = [];
                    if (e.target.getAttribute("class") == "mark_span_label") {
                        marks = that.__getMouseMarks(e, marks, that);
                    } else if (e.target.getAttribute("class") == "textLayer") {
                        var img =
                            that.$refs.iframe_viewer.contentWindow.getImageByPosition(
                                e,
                                e.target.previousElementSibling
                            );
                        if (img) {
                            marks = that.__getMouseImage(
                                { target: img },
                                marks
                            );
                        }
                    }
                    var dragData =
                        that.$refs.iframe_viewer.contentWindow.getDragData();
                    if (dragData && dragData.length > 0) {
                        if (dragData && dragData.length > 0 && dragData[0]) {
                            that.markSelectionChanged(dragData);
                            that.reDrawPage(dragData[0].page);
                        }
                    }
                    that.markMouseUp(e, marks);
                };
            this.$refs.iframe_viewer.contentWindow.document.body.onclick =
                function (e) {
                    var marks = [];
                    var signDom;
                    if (e.target.getAttribute("class") == "mark_span_label") {
                        marks = that.__getMouseMarks(e, marks, that);
                        if (
                            marks &&
                            marks.length > 0 &&
                            marks[0].canAdjust == true
                        ) {
                            that.$refs.iframe_viewer.contentWindow.addCustomDragLabel(
                                marks[0].id
                            );
                        }
                    } else if (e.target.getAttribute("class") == "textLayer") {
                        var img =
                            that.$refs.iframe_viewer.contentWindow.getImageByPosition(
                                e,
                                e.target.previousElementSibling
                            );
                        if (img) {
                            marks = that.__getMouseImage(
                                { target: img },
                                marks
                            );
                        }
                    }else if(e.target.className.indexOf('signImg')>-1){
                        signDom = e.target.parentElement.className
                    }else if(e.target.childNodes[0].className=='signImg'){
                        signDom = e.target.className
                    }
                    signDom?that.markClick(e, signDom):that.markClick(e, mark);
                };
            this.$refs.iframe_viewer.contentWindow.document.body.ondblclick =
                function (e) {
                    var marks = [];
                    if (e.target.getAttribute("class") == "mark_span_label") {
                        marks = that.__getMouseMarks(e, marks, that);
                    } else if (e.target.getAttribute("class") == "textLayer") {
                        var img =
                            that.$refs.iframe_viewer.contentWindow.getImageByPosition(
                                e,
                                e.target.previousElementSibling
                            );
                        if (img) {
                            marks = that.__getMouseImage(
                                { target: img },
                                marks
                            );
                        }
                    }
                    that.markDbClick(e, marks);
                };
        },
        /**
         * 获取缓存标注对象
         */
        getCacheMarkList() {
            return this.tempMarkList;
        },
        /**
         * 获取选择对象
         */
        getSelection() {
            var data = this.getSelectionText();
            if (data && data.length > 0) {
                return data;
            }
            data = this.getSelectionImage();
            return data;
        },
        /**
         * 获取选择数据
         */
        getSelectionText() {
            var data =
                this.$refs.iframe_viewer.contentWindow.getSelectionText();
            if (Array.isArray(data)) {
                if (data.length > 1) {
                    var result = {
                        word: "",
                        page: 0,
                        start: 0,
                        end: 0,
                        list: [],
                    };
                    for (var i = 0; i < data.length; i++) {
                        result["word"] += data[i]["word"];
                    }
                    result["page"] = data[0]["page"];
                    result["start"] = data[0]["start"];
                    result["end"] = data[data.length - 1]["end"];
                    result["type"] = "word";
                    result["list"] = data;
                    data = result;
                } else if (data.length == 1) data = data[0];
                else data = undefined;
            }
            return data;
        },
        /**
         * 获取选择图片
         */
        getSelectionImage() {
            var data =
                this.$refs.iframe_viewer.contentWindow.getSelectionImage();
            return data;
        },
        /**
         * 添加标注数据[{start:0,end:1,page:0,word:"文本"}]
         */
        addMult(markList) {
            //如果页面未加载，则添加到临时变量中
            if (
                this.$refs.iframe_viewer &&
                this.$refs.iframe_viewer.contentWindow &&
                this.$refs.iframe_viewer.contentWindow.addMult
            ) {
                this.$refs.iframe_viewer.contentWindow.addMult(markList);
            } else this.tempMarkList = markList;
        },
        addsign(list){
            if (
                this.$refs.iframe_viewer &&
                this.$refs.iframe_viewer.contentWindow &&
                this.$refs.iframe_viewer.contentWindow.addsign
            ) {
                this.$refs.iframe_viewer.contentWindow.addsign(list);
            }else this.temSignList = list;
        },
        /**
         * 获取所有标注
         */
        getAllMark() {
            if (
                this.$refs.iframe_viewer &&
                this.$refs.iframe_viewer.contentWindow &&
                this.$refs.iframe_viewer.contentWindow.getAllMark
            ) {
                return this.$refs.iframe_viewer.contentWindow.getAllMark();
            }
        },
        /**
         * 添加标注数据[{start:0,end:1,page:0,word:"文本"}]
         * 添加完后绘制当前页
         */
        addMultAndDraw(markList) {
            //如果页面未加载，则添加到临时变量中
            this.addMult(markList);
            var pages = [];
            for (var i = 0; i < markList.length; i++) {
                if (pages.indexOf(markList[i].page) == -1) {
                    pages.push(markList[i].page);
                }
            }
            for (var i = 0; i < pages.length; i++) {
                this.reDrawPage(pages[i]);
            }
        },

        /**
         * 添加单个标注数据{start:0,end:1,page:0,word:"文本"}
         */
        add(mark) {
            this.addMult([mark]);
        },

        /**
         * 添加单个标注数据{start:0,end:1,page:0,word:"文本"}
         * 添加完后绘制当前页
         */
        addAndDraw(mark) {
            this.addMultAndDraw([mark]);
        },

        /**
         * 获取当前页
         */
        getCurrentPage() {
            return this.$refs.iframe_viewer.contentWindow.getCurrentPage();
        },

        /**
         * 根据ID删除元素
         */
        remove(id) {
            this.removeMult([id]);
        },

        /**
         * 根据ID删除元素
         */
        removeMult(ids) {
            if (
                this.$refs.iframe_viewer.contentWindow &&
                this.$refs.iframe_viewer.contentWindow.removeMult
            )
                this.$refs.iframe_viewer.contentWindow.removeMult(ids);
        },

        /**
         * 根据ID删除元素
         */
        removeAndDraw(id) {
            this.removeMultAndDraw([id]);
        },

        /**
         * 根据ID更新位置
         */
        updateLocation(id, mark) {
            var marks = getMarkDataById(id);
            if (!marks || marks.length != 1) {
                marks[0].page = mark.page;
                marks[0].start = mark.start;
                marks[0].end = mark.end;
                marks[0].word = mark.word;
            }
        },

        /**
         * 根据ID更新位置
         */
        updateLocationAndDraw(id, mark) {
            this.updateLocation(id);
            this.reDrawPage(mark.page);
        },

        /**
         * 根据ID删除元素
         */
        removeMultAndDraw(ids) {
            //找到所有相同id标注集合
            var marks = [];
            for (var i = 0; i < ids.length; i++) {
                var temp = this.getMarkDataById(ids[i]);
                if (temp && temp.length > 0) {
                    for (var j = 0; j < temp.length; j++) marks.push(temp[j]);
                }
            }
            //删除标注
            this.removeMult(ids);
            //刷新相关页
            var pages = [];
            for (var i = 0; i < marks.length; i++) {
                if (marks.indexOf(marks[i].page) == -1)
                    pages.push(marks[i].page);
            }
            for (var i = 0; i < pages.length; i++) {
                this.reDrawPage(pages[i]);
            }
        },

        /**
         * 清除选中文本
         */
        clearSelectionText() {
            this.$refs.iframe_viewer.contentWindow.clearSelectionText();
        },

        /**
         * 显示标注数据[{start:0,end:1,page:0,word:"文本"}]
         */
        reDrawPage(page) {
            if (
                this.$refs.iframe_viewer &&
                this.$refs.iframe_viewer.contentWindow &&
                this.$refs.iframe_viewer.contentWindow.reDrawPage
            ) {
                this.$refs.iframe_viewer.contentWindow.reDrawPage(page);
            }
        },

        /**
         * 鼠标按下
         */
        markKeyDown(e) {
            this.$emit("markKeyDown", e);
        },

        /**
         * 鼠标按下
         */
        markMouseDown(e, mark) {
            this.$emit("markMouseDown", e, mark);
        },
        /**
         * 鼠标按下
         */
        markMouseUp(e, mark) {
            this.$emit("markMouseUp", e, mark);
        },
        /**
         * 鼠标划过
         */
        markMouseOver(e, mark) {
            this.$emit("markMouseOver", e, mark);
        },
        /**
         * 鼠标单击
         */
        markClick(e, mark) {
            this.isSign&&mark.length!=0?this.$parent.$parent.$parent.markClick( e, mark):
            this.$emit("markClick", e, mark);
        },
        /**
         * 鼠标双击
         */
        markDbClick(e, mark) {
            this.$emit("markDbClick", e, mark);
        },

        /**
         * 根据ID获取标注数据
         */
        getMarkDataById(id) {
            if (
                this.$refs.iframe_viewer.contentWindow &&
                this.$refs.iframe_viewer.contentWindow.getMarkDataById
            )
                return this.$refs.iframe_viewer.contentWindow.getMarkDataById(
                    id
                );
            return undefined;
        },

        /**
         * 根据ID定位
         */
        locationById(id) {
            var mark = this.getMarkDataById(id);
            if (mark) this.locationByMark(mark);
        },
        /**
         * 根据标注定位
         */
        locationByMark(mark) {
            if (mark && mark.length > 0) {
                this.$refs.iframe_viewer.contentWindow.locationByMark(mark[0]);
            }
        },
        /**
         * 根据ID获取高亮动画
         */
        highLightById(id) {
            var mark = this.getMarkDataById(id);
            this.highLightByMark(mark);
        },
        /**
         * 根据标注获取高亮动画
         */
        highLightByMark(mark) {
            if (mark && mark.length > 0) {
                this.$refs.iframe_viewer.contentWindow.textHightLight(mark[0]);
            }
        },
        /**
         * 标注位置变化事件
         */
        markSelectionChanged(marks) {
            this.$emit("markSelectionChanged", marks);
        },
        /**
         * 标注位置变化事件
         */
        getIsDragging() {
            return this.$refs.iframe_viewer.contentWindow.getIsDragging();
        },

        /**
         * 获取选择数据
         */
        __getMouseMarks(e, marks, that) {
            var id = e.target.getAttribute("data-id");
            if (id.indexOf(",") >= 0) {
                var ids = id.split(",");
                for (var i = 0; i < ids.length; i++) {
                    var temp = that.getMarkDataById(ids[i]);
                    if (temp && temp.length > 0) {
                        marks = marks.concat(temp);
                    }
                }
            } else marks = that.getMarkDataById(id);
            return marks;
        },

        /**
         * 获取鼠标位置图像
         */
        __getMouseImage(e, marks) {
            var id = e.target.getAttribute("data-id");
            if (id) {
                var temp = this.getMarkDataById(id);
                if (temp) marks = marks.concat(temp);
            }
            return marks;
        },
        /**
         * 获取鼠标位置图像
         */
        __selectionImageByMouse(e) {
            this.$refs.iframe_viewer.contentWindow.selectionImage(e);
        },

        /**
         * 获取缓存图片对象
         */
        getCacheImgList() {
            return this.tempImgList;
        },
        /**
         * 图片数据展示
         */

        getImgList(list) {
            if (
                this.$refs.iframe_viewer &&
                this.$refs.iframe_viewer.contentWindow &&
                this.$refs.iframe_viewer.contentWindow.getShowImg
            ) {
                this.$refs.iframe_viewer.contentWindow.getShowImg(list);
                this.tempImgList = list;
            } else this.tempImgList = list;
        },
        // 添加签名图片
        addImg(el,img){
            this.$refs.iframe_viewer.contentWindow.addImg(el,img);
        },
        //设置图片数据
        setImgData(page,img){
            debugger
        }
    },
};
</script>